<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
	<script>
		// 添加行
		function addRow() {
			var fRow = $('#row3');
			var newRow = $('<tr></tr>'); // 创建行节点
			var col1 = $('<td></td>').html('幸福从天而降'); //创建单元格节点并设置文本
			var col2 = $('<td></td>').html('&yen;18.50').attr('align', 'center'); // 创建单元格节点并设置文本和属性
			newRow.append(col1).append(col2); //把单元格添加到行节点中
			fRow.before(newRow); // 将新行插入到目标行前
		}

		// 更新表格样式
		function updateRow() {
			var uRow = $('#row1');
			// 标题行设置字体加粗、文本居中显示，背景颜色为灰色
			uRow.css({'font-weight': 'bold', 'text-align': 'center', 'background-color': '#cccccc'});
		}

		// 删除行
		function delRow() {
			var dRow = $('tr:eq(2)');
			if(dRow.length > 0){
				dRow.remove(); // 删除行
			}
		}

		// 复制行
		function copyRow() {
			var oldRow = $('#row3');
			var newRow = oldRow.clone(true); // 复制指定的行及子节点
			newRow.attr('id', ''); // 去掉复制行的 id 属性
			$('#myTable').append(newRow); //在指定节点的末尾添加行
		}	
	</script>
	
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" value="增加一行" onclick="addRow()" />
		<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
		<input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
		<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />

	</body>

</html>